<template>
  <div class="group-purchase">
    <el-text>{{ datas.title }}</el-text>
    <el-scrollbar class="mt10">
      <div class="scrollbar-flex-content">
        <div v-for="(item, index) in datas.list" :key="index" class="scrollbar-demo-item">
          <img class="img" :src="bgImg" />
          <div class="flx-column-between">
            <el-text class="w100"> {{ item.name }}</el-text>
            <div class="flx-column">
              <el-text class="money">￥{{ item.money }}</el-text>
              <el-text class="w100">剩余: 21: 30: 45</el-text>
            </div>
          </div>
        </div>
        <div class="scrollbar-demo-item" v-if="datas.list.length === 0">
          <img class="img" :src="bgImg" />
          <div class="flx-column-between">
            <el-text class="w100"> 商品名称</el-text>
            <div class="flx-column">
              <el-text class="money">￥99</el-text>
              <el-text class="w100">剩余: 21: 30: 45</el-text>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>
<script lang="ts" setup name="GroupPurchase">
import { toRefs } from "vue";
import bgImg from "@/assets/images/empty-banner.png";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
</script>
<style lang="scss" scoped>
.group-purchase {
  padding: 10px;
  background-color: #ffffff;
  .scrollbar-flex-content {
    display: flex;
    .scrollbar-demo-item {
      display: flex;
      flex-shrink: 0;
      width: 280px;
      padding: 10px;
      margin-right: 15px;
      background: #f6f6f6;
      .img {
        display: block;
        width: 98px;
        height: 98px;
        margin-right: 10px;
      }
      .money {
        width: 100%;
        font-size: 26px;
        color: #ff0000;
      }
    }
  }
}
</style>
